<template>
	<view class="container">
		<order-detail-shop :shopname="shopName" :locationtext="shopLocation"></order-detail-shop>
		<view v-for="item in imageTitle" :key="item.id">
			<view class="form-group">
				<upload-image required :title="item.value" :upload_id="item.id" @text-input="uploadText" @change="uploadImage"
				 placeholder="在这写下手表正面的描述">
				</upload-image>
			</view>
		</view>
		<view class="bottom-spilt"></view>
		<button type="primary" class="btn" @click="submitClickHandle">确认留存</button>
	</view>
</template>

<script>
	import orderDetailShop from '@/components/order-detail-shop.vue';
	import uploadImage from "@/components/upload-image.vue";
	export default {
		components: {
			orderDetailShop,
			uploadImage
		},
		data() {
			return {
				shopName: '-',
				shopLocation: '-',
				disable: false,
				orderId: 0,
				form: {
					positiveItemPhoto: '',
					positiveItemDesc: '',
					backItemPhoto: '',
					backItemDesc: '',
					sideItemPhoto: '',
					sideItemDesc: '',
					problemPhoto: '',
					problemDesc: '',
					itemPhoto: '',
					itemDesc: '',
					repairPhoto: '',
					repairDesc: '',
				},
				imageTitle: [{
					value: "正面照片及描述(只能上传1张图片)",
					id: 'positiveItem'
				}, {
					value: "背面照片及描述(只能上传1张图片)",
					id: 'backItem'
				}, {
					value: "侧面照片及描述(只能上传1张图片)",
					id: 'sideItem'
				}, {
					value: "故障面照片及描述(只能上传1张图片)",
					id: 'problem'
				}, {
					value: "修复面照片及描述(只能上传1张图片)",
					id: 'repair'
				}, {
					value: "整表照片及描述(只能上传1张图片)",
					id: 'item'
				}]
			}
		},
		onLoad(param) {
			this.shopLocation = param.locationText;
			this.shopName = param.shopName;
			this.orderId = param.orderId;
		},
		methods: {
			// 提交表单
			submitClickHandle(e) {
				if (this.disable) {
					return 0;
				}
				this.disable = true;
				let form = this.form;
				let pass = this.checkFormData(form);
				if (!pass) {
					this.disable = false;
					return 0;
				}
				form.orderId = this.orderId;
				this.submitRequest(this.orderId,form);
			},
			submitRequest(orderId, form){
				this.$login.checkTokenValidity().then(res => {
					this.$api.apiPost({
						url: `/api/order/${orderId}/repair/complete`,
						data: form
					}).then(res => {
						console.log('请求ok！', res)
						this.$msg.showMessage(res.data.msg || "维修数据留存成功")
						let order = res.data.data;
						this.$websocket.sendData({
							orderId: order.id,
							orderStep: order.orderStep,
							notifyCustomerId: order.customerId
						})
						this.toOrderDetail(order.id, order.orderNo, order.orderStep, order.shopId)
					}).catch(res => {
						console.log('请求fail！', res)
						this.$msg.showMessage(res.data.msg || "请求失败！")
						this.disabled = false;
					})
				})
			},
			uploadText(e, position) {
				position += 'Desc';
				this.form[position] = e.detail.value
			},
			// 上传图片
			uploadImage(e, position) {
				position += 'Photo';
				this.form[position] = e[0]
			},
			// 表单校验
			checkFormData(data) {
				if (!data.positiveItemPhoto || !data.positiveItemDesc) {
					this.$msg.showMessage("正面图片或者正面问题描述不能为空")
					return false;
				} else if (!data.backItemPhoto || !data.backItemDesc) {
					this.$msg.showMessage("背面图片或者背面问题描述不能为空")
					return false;
				} else if (!data.sideItemPhoto || !data.sideItemDesc) {
					this.$msg.showMessage("侧面图片或者侧面问题描述不能为空")
					return false;
				} else if (!data.problemPhoto || !data.problemDesc) {
					this.$msg.showMessage("故障面图片或者故障问题描述不能为空")
					return false;
				} else if (!data.repairPhoto || !data.repairDesc) {
					this.$msg.showMessage("修复面图片或者修复问题描述不能为空")
					return false;
				} else if (!data.itemPhoto || !data.itemDesc) {
					this.$msg.showMessage("整表图片或者整表问题描述不能为空")
					return false;
				}
				return true;
			},
			toOrderDetail (orderId, orderNo, orderStep, shopId) {
				let path = `/pages/order/order-info/order-info?`;
				path += `orderId=${orderId}&shopId=${shopId}&orderNo=${orderNo}&orderStep=${orderStep}`
				uni.redirectTo({
					url: path
				})
			}
		}
	}
</script>

<style>

</style>
